<template>
	<satri-page status-bar-background="transparent">
		<!-- #ifdef MP -->
		<satri-sticky>
			<satri-topbar :show-back="false" :border="false" background-color="transparent" />
		</satri-sticky>
		<!-- #endif -->

		<view class="page-my">
			<view class="header">
				<view class="icon" @tap="toEdit">
					<text class="satri-icon-edit"></text>
				</view>

				<view class="icon" @tap="toSet">
					<text class="satri-icon-set"></text>
				</view>

				<view class="icon" @tap="toMsg">
					<text class="satri-icon-msg"></text>
				</view>
			</view>

			<view class="user" @tap="toEdit">
				<satri-avatar :src="user.info?.avatarUrl" :size="100" />

				<view class="det">
					<satri-text :size="32" block :margin="[0, 0, 8, 0]">{{
						user.info?.nickName || "未登录"
					}}</satri-text>
					<satri-text :size="24" color="info">SatriUni：推荐与SatriAdmin极速开发后台框架配套使用的移动端开发框架</satri-text>
				</view>
			</view>

			<view class="count">
				<view class="item">
					<text>171</text>
					<text>总点击</text>
				</view>

				<view class="item">
					<text>24</text>
					<text>赞</text>
				</view>

				<view class="item">
					<text>89</text>
					<text>关注</text>
				</view>

				<view class="item">
					<text>653</text>
					<text>粉丝</text>
				</view>
			</view>

			<view class="switch">
				<view class="item">
					<satri-text :size="28" bold block :margin="[0, 0, 10, 0]">接单模式</satri-text>
					<satri-text :size="24" color="info">已关闭</satri-text>

					<view class="inner">
						<satri-switch />
					</view>
				</view>

				<view class="item">
					<satri-text :size="28" bold block :margin="[0, 0, 10, 0]">消息通知</satri-text>
					<satri-text :size="24" color="info">已开启</satri-text>

					<view class="inner">
						<satri-switch />
					</view>
				</view>
			</view>

			<view class="status">
				<satri-text block :size="30" bold>我的订单</satri-text>

				<view class="list">
					<view class="item" v-for="(item, index) in order.list" :key="index" @tap="order.toLink(item.value)">
						<satri-icon :name="item.icon" :size="50" />
						<satri-text :margin="[18, 0, 0, 0]" :size="24" color="info">
							{{ item.label }}
						</satri-text>
					</view>
				</view>
			</view>

			<view class="menu">
				<satri-list :radius="24" :border="false">
					<satri-list-item label="我的账单" @tap="toBill">
						<template #icon>
							<satri-icon name="bill" :size="40" />
						</template>
					</satri-list-item>

					<satri-list-item label="观看历史">
						<template #icon>
							<satri-icon name="time" :size="40" />
						</template>
					</satri-list-item>

					<satri-list-item label="数据看板">
						<template #icon>
							<satri-icon name="chart-bar" :size="40" />
						</template>
					</satri-list-item>

					<satri-list-item label="邀请好友">
						<template #icon>
							<satri-icon name="share" :size="40" />
						</template>
					</satri-list-item>
				</satri-list>

				<satri-list :radius="24" :border="false">
					<satri-list-item label="设置" @tap="toSet">
						<template #icon>
							<satri-icon name="set" :size="40" />
						</template>
					</satri-list-item>
				</satri-list>
			</view>
		</view>

		<tabbar />
	</satri-page>
</template>

<script lang="ts" setup>
	import { onPullDownRefresh, onShow } from "@dcloudio/uni-app";
	import { useSatri, useStore, module } from "/@/satri";
	import Tabbar from "./components/tabbar.vue";
	import { useUi } from "/$/satri-ui";
	import { reactive } from "vue";

	const { router } = useSatri();
	const { user } = useStore();
	const ui = useUi();

	async function refresh() {
		if (user.token) {
			await user.get();
		} else {
			// user.logout();
		}
	}

	const order = reactive({
		list: [
			{
				icon: "order-paid",
				label: "待支付",
				value: 1,
			},
			{
				icon: "order-not-shipped",
				label: "未发货",
				value: 2,
			},
			{
				icon: "order-received",
				label: "已发货",
				value: 3,
			},
			{
				icon: "order-refund",
				label: "售后 / 退款",
				value: 4,
			},
		],

		toLink(value : number) {
			ui.showToast("订单模块不存在，请在插件市场中下载");
		},
	});

	function toDev() {
		ui.showToast("开发中");
	}

	function toBill() {
		ui.showToast("财务模块不存在，请在插件市场中下载");
	}

	function toSet() {
		router.push("/pages/user/set");
	}

	function toEdit() {
		router.push("/pages/user/edit");
	}

	function toMsg() {
		if (module.get("satri-msg")) {
			router.push("/uni_modules/satri-msg/pages/list");
		} else {
			ui.showToast("消息模块不存在，请在插件市场中下载");
		}
	}

	onPullDownRefresh(async () => {
		await refresh();
		uni.stopPullDownRefresh();
	});

	onShow(() => {
		refresh();
	});
</script>

<style lang="scss" scoped>
	$gap: 24rpx;

	.page-my {
		padding: $gap;

		.header {
			display: flex;

			.icon {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 60rpx;
				width: 60rpx;
				background-color: rgba(150, 150, 150, 0.1);
				border-radius: 16rpx;
				font-size: 32rpx;
				margin-right: $gap;

				&:last-child {
					margin-left: auto;
					margin-right: 0;
				}
			}
		}

		.user {
			display: flex;
			align-items: center;
			padding: 48rpx 12rpx;

			.det {
				flex: 1;
				margin-left: 32rpx;
			}
		}

		.count {
			display: flex;
			margin-bottom: 32rpx;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				flex: 1;

				text {
					&:nth-child(1) {
						font-size: 40rpx;
						margin-bottom: 4rpx;
						font-weight: bold;
					}

					&:nth-child(2) {
						font-size: 24rpx;
						color: $satri-color-info;
					}
				}
			}
		}

		.switch {
			display: flex;
			margin-bottom: 24rpx;

			.item {
				flex: 1;
				border-radius: 24rpx;
				padding: 32rpx;
				background-color: #fff;
				position: relative;

				.inner {
					position: absolute;
					right: 24rpx;
					top: calc(50% - 30rpx);
					transform: scale(0.8);
				}

				&:nth-child(1) {
					margin-right: 12rpx;
				}

				&:nth-child(2) {
					margin-left: 12rpx;
				}
			}
		}

		.status {
			background-color: #fff;
			border-radius: 24rpx;
			padding: 32rpx;
			margin-bottom: 24rpx;

			.list {
				display: flex;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					flex: 1;
					padding: 48rpx 0 24rpx 0;
				}
			}
		}

		.menu {
			:deep(.satri-list-item) {
				padding: 4rpx 6rpx 4rpx 12rpx;
			}
		}
	}
</style>